import { IconFont } from '@nutui/icons-react-taro'
import { Col, Grid, Image, Row, SearchBar } from '@nutui/nutui-react-taro'
import { ScrollView, Text, View } from '@tarojs/components'
import Button from '../../components/button'
import Card from '../../components/card'
import ImageContent from '../../components/image-content'
import Layout from '../../components/layout'
import SectionHeader from '../../components/section-header'
import { useNavigation } from '../../hooks/useNavigation'
import './index.less'

const Home = () => {
  const { navigateTo } = useNavigation()

  // 服务分类数据
  const serviceCategories = [
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='DIYcanba' size={20} />,
      title: '墙面翻新',
      color: '#52c41a',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='chouyouyanji' size={20} />,
      title: '厨房改造',
      color: '#1890ff',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='reshuiqi' size={20} />,
      title: '卫浴焕新',
      color: '#722ed1',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='kongzhonghuayuan' size={20} />,
      title: '阳台升级',
      color: '#13c2c2',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='diancilu' size={20} />,
      title: '灯光设计',
      color: '#faad14',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='zaixianxuanfang' size={20} />,
      title: '门窗更换',
      color: '#f5222d',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='shafa' size={20} />,
      title: '软装搭配',
      color: '#eb2f96',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='yigui' size={20} />,
      title: '收纳定制',
      color: '#52c41a',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='zaixianxuanfang' size={20} />,
      title: '户型规划',
      color: '#1890ff',
    },
  ]

  // 精选案例数据
  const featuredCases = [
    {
      id: 1,
      title: '80平老房变身日式原木风',
      subtitle: '两室一厅 | 15万',
      image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop&crop=center',
    },
    {
      id: 2,
      title: '次卧大改造，实现衣帽间自由',
      subtitle: '局部改造 | 3万',
      image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop&crop=center',
    },
  ]

  // 服务保障数据
  const serviceGuarantees = [
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='baohuhaoma' size={40} />,
      title: '官方认证',
      desc: '平台严格筛选',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='zhifudingjin' size={40} />,
      title: '价格透明',
      desc: '无隐形增项',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='anquanbaozhang' size={40} />,
      title: '工艺保障',
      desc: '德系施工标准',
    },
  ]

  const gotoProjectDetails = () => {
    navigateTo({
      url: '/pages/project-details/index',
      params: { id: '1' },
    })
  }

  return (
    <Layout title='首页'>
      <ScrollView scrollY className='home-container'>
        <View className='p-16' style={{ paddingTop: 0 }}>
          <SearchBar placeholder='搜索服务、案例或设计师' shape='round' className='search-bar mt-16 mb-16' />
          <Row gutter={10}>
            <Col span={12}>
              <ImageContent
                width='100%'
                onClick={() => navigateTo('/pages/quick-appointment/index')}
                height={100}
                title='一键预约'
                description='预约服务，轻松搞定'
                src='https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop&crop=center'
              />
            </Col>
            <Col span={12}>
              <ImageContent
                width='100%'
                onClick={() => navigateTo('/pages/fee-estimation/index')}
                height={100}
                title='透明报价'
                description='预算清晰无隐形消费'
                src='https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop&crop=center'
              />
            </Col>
          </Row>

          {/* 服务分类网格 */}
          <Grid columns={4} gap={10} className='service-section'>
            {serviceCategories.slice(0, 7).map((item, index) => (
              <Grid.Item key={index} text={item.title} onClick={gotoProjectDetails}>
                {item.icon}
              </Grid.Item>
            ))}
            <Grid.Item text='全部服务'>
              <IconFont fontClassName='iconfont' classPrefix='icon' name='gengduo' size={20} />
            </Grid.Item>
          </Grid>

          {/* 精选案例 */}
          <View className='cases-section'>
            <SectionHeader title='精选案例' showViewAll onViewAllClick={() => console.log('查看全部案例')} />
            <Row gutter='10' style={{ gap: 10 }}>
              {featuredCases.map((caseItem) => (
                <Col span={12} key={caseItem.id} className='case-card' onClick={gotoProjectDetails}>
                  <Image
                    src='https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop&crop=center'
                    width='100%'
                    height={120}
                    radius={12}
                    className='case-image'
                    mode='aspectFill'
                  />
                  <View className='case-info'>
                    <Text className='case-title'>{caseItem.title}</Text>
                    <Text className='case-subtitle'>{caseItem.subtitle}</Text>
                  </View>
                </Col>
              ))}
            </Row>
          </View>

          {/* 服务保障 */}
          <View className='guarantee-section'>
            <Text className='section-title'>服务保障</Text>
          </View>
          <Grid columns={3} gap={10}>
            {serviceGuarantees.map((item, index) => (
              <Grid.Item key={index}>
                <Text>{item.icon}</Text>
                <View className='guarantee-info'>
                  <Text className='guarantee-title'>{item.title}</Text>
                  <Text className='guarantee-desc'>{item.desc}</Text>
                </View>
              </Grid.Item>
            ))}
          </Grid>
          {/* CTA区域 */}
          <Card className='cta-section'>
            <View className='cta-content'>
              <Text className='cta-title'>专属方案，限时免费领</Text>
              <Text className='cta-subtitle'>AI诊断 · 智能报价 · 在线支付</Text>
            </View>
            <Button>立即获取</Button>
          </Card>
        </View>
      </ScrollView>
    </Layout>
  )
}

export default Home
